fix: Improve visual accesibilty of hyperlinks #84
Conversation
nandenjin
commented
Dec 4, 2025
nandenjin
commented
- Keep contrast between link color and background color
- Add underline to links
There was a problem hiding this comment.
Pull request overview
This PR improves the visual accessibility of hyperlinks by using a higher contrast color and making underlines always visible. The link color is changed from #0074e4 to #05a (a darker blue with better contrast), and links now always display an underline instead of only on hover.
- Changed link color to
#05afor improved contrast with the background - Added persistent underlines to all links with appropriate offset spacing
- Preserved clean styling for table of contents links by overriding the underline
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
| color: #05a; | ||
| text-decoration: underline; | ||
| text-underline-offset: 0.2em; |
There was a problem hiding this comment.
The removal of the :hover state means links no longer provide visual feedback when users hover over them. For better accessibility and user experience, consider adding a hover state that changes the color or styling. For example:
a {
color: #05a;
text-decoration: underline;
text-underline-offset: 0.2em;
&:hover {
color: #039;
}
}This maintains the accessibility improvements while providing visual feedback for mouse users.
| text-underline-offset: 0.2em; | |
| text-underline-offset: 0.2em; | |
| &:hover { | |
| color: #039; | |
| } |
